<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>09.表单事件</title>
</head>

<body>
    <!-- onsubmit="return handlerSubmit()" -->
    <form name="myform"  action="https://www.baidu.com" method="get">
        <!-- 输入的内容 小于6个字符  提示 不合法  大于6个字符 合法 -->
        <input type="text" name="username" value=""><span id="contentNode"></span>
        <br>
        <input type="text" name="address" value="">
        <br>
        <!-- 注册改变事件 -->
        <select name="city">
            <option value="bj">北京</option>
            <option value="sh">上海</option>
            <option value="gz">广州</option>
        </select>
        <br>
        <input type="submit" value="提交">
    </form>

    <script>
        /*
        onfocus: 修饰文本  获得焦点
        onblur： 修饰文本 失去焦点
        onchange: 修饰下拉框  改变下拉框的内容
        onchange： 修饰文本 文本内容改变+ 失去焦点
        onsubmit 事件 比较特殊  存在返回值的 
            默认返回值是true 表示可以提交 
            false 不可以被提交
        */
        var usernameNode = document.myform.username;
        var addressNode = document.myform.address;
        var cityNode = document.myform.city;
        usernameNode.onfocus = function () {
            console.log("我获得了焦点....");
        }
        // 为文本注册失去焦点事件
        usernameNode.onblur = function () {
            // console.log("我失去了焦点。。。。");
            var value = this.value;
            if (value.length >= 6) {
                contentNode.innerHTML = "输入合法....."
            } else {
                contentNode.innerHTML = "输入不合法....."
            }
        }
        // 为下拉选项注册改变内容事件
        cityNode.onchange = function () {
            console.log(this.value);
        }
        // 为下文本注册改变内容事件
        addressNode.onchange = function () {
            console.log("xxxx");
        }

        document.myform.onsubmit = function() {
            var value = usernameNode.value;
            if (value.length >= 6) {
                alert("输入合法.....")
                 return true
            } else {
                alert("输入不合法.....")
                return false;
       
            }
        }

        function handlerSubmit() {
   

            var value = usernameNode.value;
            if (value.length >= 6) {
                alert("输入合法.....")
                 return true
            } else {
    
                alert("输入不合法.....")
                return false;
       
            }
        }
    </script>

</body>

</html>